<template>
  <div class="container">
    <div class="header"></div>
    <div class="bottom">
      <div class="map-container">
        <div class="map-container-inner">
          <div class="title-select">
            <div class="title">
              <button class="custom-btn btn-3" style="border-top-left-radius: 0;"><span>轨迹图</span></button>
            </div>
            <div class="select">
              <SelectComponent />
            </div>
          </div>
          <div id="map"></div>
        </div>
      </div>
      <div class="right">
        <div class="info base-info">
          <div class="info-inner">
            <button class="custom-btn btn-3"><span>基本信息</span></button>
            <BaseInfoTable />
          </div>
        </div>

        <div class="space"></div>

        <div class="info position-info">
          <div class="info-inner">
            <div></div>
            <button class="custom-btn btn-3" style="border-top-left-radius: 8px;"><span>位置信息</span></button>
            <PositionInfoTable />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { ref, onMounted } from "vue";
// import AntPathPolyline from "./tools/AntPathPolyline";
import SelectComponent from "./components/SelectComponent.vue";
import BaseInfoTable from "./components/BaseInfoTable.vue";
import PositionInfoTable from "./components/PositionInfoTable.vue";
import setAntPathPolyline from "./components/setAntPathPolyline.ts";
import setPolyLine from "./components/setPolyLine.ts";
import setLocation from "./components/setLocation.ts";

let map = ref(null);

onMounted(() => {
  const map = L.map("map").setView([39.898457, 116.391844], 13);

  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    minZoom: 7,
    maxZoom: 16,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  const points1 = [];
  const points2 = [];

  const newPoints1 = [
    [39.898457, 116.391844],
    [39.898595, 116.377947],
    [39.898341, 116.368001],
    [39.898063, 116.357144],
    [39.899095, 116.351934],
    [39.905871, 116.35067],
    [39.922329, 116.3498],
    [39.931017, 116.349671],
    [39.939104, 116.349225],
    [39.942233, 116.34991],
    [39.947263, 116.366892],
    [39.947568, 116.387537],
    [39.947764, 116.401988],
    [39.947929, 116.410824],
    [39.947558, 116.42674],
    [39.9397, 116.427338],
    [39.932404, 116.427919],
    [39.923109, 116.428377],
    [39.907094, 116.429583],
    [39.906858, 116.41404],
    [39.906622, 116.405321],
    [39.906324, 116.394954],
    [39.906308, 116.391264],
    [39.916611, 116.390748],
  ];

  const newPoints2 = JSON.parse(JSON.stringify(newPoints1)).reverse();

  const test1 = new AntPathPolyline();
  const testName1 = AntPathPolyline.generateUniqueChar();

  const test2 = new AntPathPolyline();
  const testName2 = AntPathPolyline.generateUniqueChar();

  let width = 0.25;

  let index = 0;

  const timer = setInterval(function () {
    if (index < newPoints1.length) {
      points1.push(newPoints1[index]);
      points2.push(newPoints2[index]);
      test1.drawPolyline(
        map,
        points1,
        width,
        AntPathPolyline.polylineStyleConfig[0],
        AntPathPolyline.carIconConfig[0],
        testName1
      );
      test2.drawPolyline(
        map,
        points2,
        width,
        AntPathPolyline.polylineStyleConfig[1],
        AntPathPolyline.carIconConfig[1],
        testName2
      );
      index++;
    } else {
      clearTimeout(timer);
    }
  }, 1000);
});
</script>
<style scoped>
#container {
  height: 100% !important;
  width: 100% !important;
}

.header {
  height: 90px;
  /* background:url("./assets/head_bg.png") no-repeat scroll center 0; */
}

.bottom {
  display: flex;
  height: calc(100vh - 90px);
}

.map-container {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 100%;
  flex: 1;
  padding: 1px;
  margin-left: 5px;
  min-width: 400px;
}

.map-container-inner {
  border-radius: 10px;
  background: #0b4175;
  height: 100%;
}

.title-select {
  height: 50px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  color: #fff;
}

.select {
  color: #fff;
}

#map {
  height: calc(100% - 50px);
  /* border-radius: 10px; */
}

.right {
  width: 700px;
  margin-left: 10px;
  margin-right: 5px;
  height: 100%;
}

.info {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 260px;
  padding: 1px;
}

.info-inner {
  border-radius: 10px;
  background: rgba(11, 65, 117, 0.9);
  height: 100%;
}

.base-info {
  height: 300px;
  color: #fff;
  overflow: auto;
}

.position-info {
  height: 350px;
  color: #fff;
}
</style>
